<script setup>
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import { useTaxStore } from "../../../stores/tax/taxStore";

// 初始化路由
const router = useRouter();

// 获取 store 中的 taxData
const taxStore = useTaxStore();

// 获取税务数据
const taxData = computed(() => taxStore.taxData);

// 根据状态过滤出“已申报”和“未申报”的记录
const declaredRecords = computed(() =>
  taxData.value.filter((item) => item.status === "已申报")
);
const undeclaredRecords = computed(() =>
  taxData.value.filter((item) => item.status === "未申报")
);

// 分页器
const totalRecords = ref(undeclaredRecords.value.length); // 总记录数
const pageSize = ref(10); // 每页显示记录数
const currentPage = ref(1); // 当前页码

// 新增税务申报计划
const addTaxPlan = () => {
  router.push("/financial/tax/taxPage?id=new");
};

// 修改税务申报计划
const modifyTaxPlan = (record) => {
  router.push(`/financial/tax/taxPage?id=${record.id}`);
};

// 生成税务申报计划
const generateTaxPlan = (record) => {
  const fileUrl = "/财务报表.pdf";
  const link = document.createElement("a");
  link.href = fileUrl;
  link.download = "财务报表.pdf";
  link.click();
};

// 打印税务记录
const printTaxRecords = (record) => {
  const fileUrl = "/财务报表.pdf";
  const link = document.createElement("a");
  link.href = fileUrl;
  link.download = "财务报表.pdf";
  link.click();
};
</script>

<template>
  <div class="tax-management">
    <!-- 税务申报提醒 -->
    <section class="section">
      <div class="undeclaredTax">
        <div class="section-header">
          <h1>税务申报计划</h1>
          <!-- 添加申报计划按钮右上角对齐 -->
          <el-button type="primary" @click="addTaxPlan" class="btn-add-tax-plan"
            >添加申报计划</el-button
          >
        </div>

        <!-- 未申报税务申报计划展示 -->
        <el-table :data="undeclaredRecords">
          <el-table-column label="记录名称" prop="recordName"></el-table-column>
          <el-table-column
            label="公司名称"
            prop="companyName"
          ></el-table-column>
          <el-table-column label="申报时间" prop="taxDate"></el-table-column>
          <el-table-column label="税务类型" prop="taxForm"></el-table-column>
          <el-table-column label="申报金额" prop="taxMoney"></el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button @click="modifyTaxPlan(row)" size="small" type="primary"
                >修改</el-button
              >
              <el-button @click="generateTaxPlan" size="small" type="success"
                >生成</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页器 -->
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="totalRecords"
        layout="prev, pager, next, sizes"
        @size-change="pageSize = $event"
        @current-change="currentPage = $event"
      ></el-pagination>
    </section>

    <!-- 税务记录归档 -->
    <section class="section">
      <div class="declaredTax">
        <h1>往期税务记录</h1>

        <!-- 显示已申报的税务记录 -->
        <el-table :data="declaredRecords" style="width: 100%">
          <el-table-column label="记录名称" prop="recordName"></el-table-column>
          <el-table-column label="申报时间" prop="taxDate"></el-table-column>
          <el-table-column label="税金金额" prop="taxMoney"></el-table-column>
          <el-table-column label="申报状态" prop="status"></el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button
                @click="printTaxRecords(row)"
                size="small"
                type="primary"
                >打印记录</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页器 -->
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="totalRecords"
        layout="prev, pager, next, sizes"
        @size-change="pageSize = $event"
        @current-change="currentPage = $event"
      ></el-pagination>
    </section>
  </div>
</template>

<style scoped>
.tax-management {
  padding: 20px;
}

.section {
  background: white;
  padding: 20px 20px 0px 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  max-height: 50vh;
  overflow-y: auto;
}

.undeclaredTax {
  height: 40vh;
  position: relative;
}

.declaredTax {
  height: 40vh;
  position: relative;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn-add-tax-plan {
  align-self: flex-start;
}

.tax-reminder,
.tax-records {
  padding: 15px;
  background-color: #f4f6f9;
  border-radius: 5px;
  margin-top: 10px;
}

.tax-records button {
  padding: 10px 20px;
  font-size: 1rem;
  margin-top: 10px;
  background-color: #2d3a4b;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.tax-records button:hover {
  background-color: #1a2432;
}

.tax-records .btn-view-records {
  margin-right: 10px;
}

.el-button {
  margin-top: 10px;
}

.el-button:hover {
  opacity: 0.8;
}

.el-divider {
  margin: 20px 0;
}

.el-row {
  margin-bottom: 5px;
}

.el-pagination {
  padding: 10px 0;
}
</style>
